<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.42.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/base.css" rel="stylesheet" type="text/css">
    <link href="css/index2.css" rel="stylesheet" type="text/css">
    <link href="css/reg.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="css/ace.min.css" type="text/css"/>
</head>

<body>
<!--导航栏-->
<div class="header-page"></div>
<div class="login-container">
    <div class="space-6"></div>
    <div class="position-relative">
        <div id="login-box" class="login-box visible widget-box no-border">
            <div class="widget-body">
                <div class="widget-main">
                    <h4 class="header blue lighter bigger">
                        <i class="ace-icon fa fa-coffee green"></i>
                        用户登陆
                    </h4>
                    <div class="space-6"></div>
                    <span id="error-message" style="color: red"></span>
                    <form>
                        <fieldset>
                            <label class="block clearfix">
                                <span class="block input-icon input-icon-left">
                                    <i class="ace-icon fa fa-user"></i>
                                    <input id="account" type="text" class="form-control" placeholder="请输入电话号码或邮箱" />
                                </span>
                            </label>

                            <label class="block clearfix">
                                <span class="block input-icon input-icon-left">
                                    <i class="ace-icon fa fa-lock"></i>
                                    <input id="password" type="password" class="form-control" placeholder="请输入密码" />
                                </span>
                            </label>


                            <label class="block clearfix">
                                <span>
                                    <input type="text" id="codeStr" placeholder="验证码" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <img id="imgPic" src="/verify/getCodeImg">
                                </span>
                            </label>


                            <div class="space"></div>

                            <div class="clearfix">
                                <label class="inline">
                                    <input type="checkbox" class="ace" />
                                    <span class="lbl"> 记住</span>
                                </label>

                                <button id="login-1" type="button" class="width-35 pull-right btn btn-sm btn-primary">
                                    <i class="ace-icon fa fa-key"></i>
                                    <span    class="bigger-110">登录</span>
                                </button>
                            </div>

                            <div class="space-4"></div>
                        </fieldset>
                    </form>

                    <div class="social-or-login center">
                        <span class="bigger-110">第三方登录</span>
                    </div>

                    <div class="space-6"></div>

                    <div class="social-login center">
                        <a href="#">
                            <img src="images/weixin.png">
                        </a>

                        <a href="#">
                            <img src="images/qq.png">
                        </a>

                        <a href="#">
                            <img src="images/sina.png">
                        </a>
                    </div>

                </div>
                <div class="toolbar clearfix">
                    <div>
                        <a href="#" data-target="#forgot-box" class="forgot-password-link">
                            <i class="ace-icon fa fa-arrow-left"></i>
                            忘记密码
                        </a>
                    </div>

                    <div>
                        <a href="reg.html" data-target="#signup-box" class="user-signup-link">
                            注册
                            <i class="ace-icon fa fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer-page"></div>
<script>


    $('.header-page').load('header.html');
    $('.footer-page').load('footer.html');
    var regularMail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var regularPhone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

    /*登录校验方法*/
    function validated(account,password) {
        /*正则表达式*/

        /*校验account*/
        // 1、非空，满足两个正则表达式中的一个
        if(account!=''&&(regularPhone.test(account)||regularMail.test(account))){
            if(password!=''){
                /*校验通过*/
                return {flag:true}
            }
            return {flag:false,message:'请输入密码'};
        }else{
            if(account==''){
                return {flag:false,message:'请输入账号'};
            }
            return {flag:false,message:'请核对邮箱或手机号格式'};
        }

    }

    /*页面加载完毕后执行*/
    $(function (){
        /*点击验证码更新*/
        $('#imgPic').click(function (){
            $('#imgPic').attr('src','/verify/getCodeImg?'+new Date());
        });

        /*点击登录*/
        $('#login-1').click(function () {
            console.log('执行了程序...');
            let email;
            let phone;
            /*js获取用户账号输入值和密码输入值、验证码*/
            let account= $('#account').val();
            let password=$('#password').val();
            let codeStr=$('#codeStr').val();
            /*前端校验*/
           let result= validated(account,password);
           if(!result.flag){
               $('#imgPic').click();
               $('#error-message').html(result.message);
           }else{
               /*正则表达式校验选择*/
               if(regularMail.test(account)){
                   email=account;
               }
               if(regularPhone.test(account)){
                   phone=account;
               }
               /*验证验证码*/
               if(codeStr!=''&&codeStr.length===4){
                       /*前端校验通过后发送请求访问后端,进行登录*/
                       $.post(
                           '/user/login',
                           {email:email,password:password,phone:phone,verifyCode:codeStr},
                           function (data){
                               if(!data.flag){
                                   // flag = false  验证失败  更新验证码
                                   $('#imgPic').click();
                                   $('#error-message').html(data.mess);
                               }else{
                                   // 验证成功  跳转  index.html
                                   window.location.href='index.html';
                               }
                           }
                       );
               }else {
                   $('#imgPic').click();
                   $('#error-message').html('验证码不能为空且必须为4位');
               }

           };

       });

    })

</script>

</body>
</html>
